<template>
	<view class="container">
		<navView navTitle="开票详情" titleColor="#fff" :isBack="true"></navView>
		<view class="containerbox">

			<!-- 合同名称 -->
			<view class="contract-name">
				<text class="title">{{ contractName }}</text>
			</view>

			<!-- 头部按钮 -->
			<view class="button-group">
				<button :class="['button', { active: activeState === 1 }]"
					@click="handleContractDetails(1)">合同详情</button>
				<button :class="['button', { active: activeState === 2 }]"
					@click="handleContractDetails(2)">发票下载</button>
			</view>

			<view v-if="activeState == 1">
				<!-- 数据统计 -->
				<view class="data-statistics">
					<!-- 标题 -->
					<view class="title">
						<view class="tiao"></view>
						数据统计
					</view>
					<!-- 第一组数据 -->
					<view class="data-row">
						<view class="data-item">
							<text class="label">已付金额</text>
							<text class="value">{{ detail.payment_status.paid_amount }}</text>
						</view>
						<view class="data-item">
							<text class="label">未付金额</text>
							<text class="value">{{ detail.payment_status.unpaid_amount }}</text>
						</view>
						<view class="data-item">
							<text class="label">待付金额</text>
							<text class="value">{{ detail.payment_status.pending_payment }}</text>
						</view>
					</view>
					<!-- 第二组数据 -->
					<view class="data-row">
						<view class="data-item">
							<text class="label">已开票金额</text>
							<text class="value">{{ detail.payment_status.invoiced_amount }}</text>
						</view>
						<view class="data-item">
							<text class="label">未开票金额</text>
							<text class="value">{{ detail.payment_status.uninvoiced_amount }}</text>
						</view>
						<view class="data-item">
							<text class="label">待开票金额</text>
							<text class="value">{{ detail.payment_status.pending_invoice }}</text>
						</view>
					</view>
					<view class="btns">
						<button class="btn2" @tap="$navTo('/subpkg/invoice/invoiceForm?id=' + detail.id)">发票申请</button>
						<button class="btn1" @tap="$navTo('/subpkg/invoice/invoiceUpload?id=' + detail.id)">开票开具</button>
					</view>
				</view>

				<!-- 合同详情 -->
				<view class="contract-details">
					<view class="title">合同详情</view>
					<view class="content">
						<text>
							{{ detail.content }}
						</text>
					</view>
				</view>
			</view>
			<view v-if="activeState == 2">
				<view class="root">
					<view class="list-item" v-for="(item, index) in fileList" :key="index">
						<image class="file-icon" src="https://hfd.bjlzkj.com/static/list/PDF.png" />
						<view class="option">
							<view class="file-info">
								<view class="file-title">{{ item.name }}</view>
								<view class="file-time">发票抬头：{{ item.title }}</view>
							</view>
							<view class="action-buttons">
								<button class="download-button" @click="handleDownload(item)">下载</button>
								<button class="view-button" @click="handleView(item)">查看</button>
							</view>
						</view>
					</view>
				</view>
			</view>

		</view>
	</view>
</template>

<script>
// 定义全局网络请求
import download from '@/util/filesdownload.js'; //
export default {
	data() {
		return {
			contractName: '此处为合同名称',
			contractCode: 'NO.5689423563548',
			activeState: 1,
			fileList: [{
				name: '合同扫描件',
				time: '2023-12-06 14:20',
			},
			{
				name: '合同扫描件',
				time: '2023-12-06 14:20',
			},
			],
			detail: {},
		};
	},
	onLoad(option) {
		if (option.id) {
			this.id = option.id
			this.getDetail()
		}
	},
	methods: {
		getDetail() {
			this.$request('/addons/qingdong/invoice/getInvoiceDetail', 'GET', {
				id: this.id
			}).then(res => {
				console.log(res)
				this.contractName = res.data.name
				this.contractCode = res.data.num
				// 处理嵌套文件结构
				this.fileList = res.data.invoice_files
					.filter(item => item.files && item.files.length > 0) // 过滤空文件
					.flatMap(item => item.files.map(file => ({
						...file,
						title: item.title // 保留关联ID
					})));
				this.detail = res.data
			})
		},
		handleContractDetails(type) {
			this.activeState = type
		},
		handleDownload(item) {
			if (item.url) {
				download.downloadFun(item.url);
			} else {
				uni.showToast({ title: '文件路径无效', icon: 'none' });
			}
		},
		handleView(item) {
			if (!item.url) {
				uni.showToast({ title: '暂无可预览文件', icon: 'none' });
				return;
			}
			// 检查文件是否已下载
			uni.downloadFile({
				url: item.url, 
				success: function (res) {
					var filePath = res.tempFilePath;
					uni.openDocument({
						filePath: encodeURI(filePath),
						showMenu: true,
						success: function (res) {
							console.log('打开文档成功', res);
						}
					});
				}
			});
		}
	},
};
</script>

<style scoped lang="scss">
.container {
	padding: 20rpx;
	box-sizing: border-box;

	.containerbox {
		width: 100%;
		height: 80vh;
		background: #fff;
		border-radius: 15rpx;
		padding: 30rpx;
		box-shadow: 0rpx 2rpx 12rpx 2rpx rgba(97, 97, 97, 0.25);
		box-sizing: border-box;

		.contract-name {
			text-align: center;
			margin-bottom: 40rpx;

			.title {
				font-size: 40rpx;
				font-weight: bold;
			}
		}

		.button-group {
			display: flex;
			justify-content: space-around;
			margin-bottom: 40rpx;

			.button {
				color: #666666;
				border: 1rpx solid #B4B4B4;
				border-radius: 10rpx;
				width: 192rpx;
				height: 62rpx;
				line-height: 62rpx;
				background: #FFFFFF;
				border-radius: 6rpx 6rpx 6rpx 6rpx;
				font-size: 28rpx;
				background: #fff;

				&.active {
					color: #1890ff;
					border: 1rpx solid #1890ff;
				}
			}
		}

		.data-statistics {
			background-color: #ffffff;
			border-radius: 20rpx;
			margin-bottom: 40rpx;

			.title {
				font-size: 28rpx;
				font-weight: bold;
				margin-bottom: 20rpx;
				display: flex;
				align-items: center;

				.tiao {
					width: 6rpx;
					height: 22rpx;
					background: #1B87E8;
					border-radius: 8rpx 8rpx 8rpx 8rpx;
					margin-right: 10rpx;
				}
			}

			.data-row {
				display: flex;
				justify-content: space-around;
				margin-bottom: 20rpx;

				.data-item {
					display: flex;
					flex-direction: column;
					align-items: center;

					.label {
						font-size: 28rpx;
						color: #666666;
					}

					.value {
						font-size: 32rpx;
						margin-top: 10rpx;
						font-weight: bold;
					}
				}
			}
		}

		.btns {
			width: 100vw;
			position: fixed;
			bottom: 150rpx;
			left: 0;
			padding: 30rpx;
			box-sizing: border-box;

			.btn1 {
				width: 100%;
				height: 84rpx;
				background: #FFFFFF;
				border-radius: 84rpx 84rpx 84rpx 84rpx;
				border: 2rpx solid #008EFF;
				font-weight: 400;
				font-size: 30rpx;
				color: #008EFF;
				line-height: 84rpx;
				margin-top: 20rpx;
			}

			.btn2 {
				width: 100%;
				height: 84rpx;
				background: #008EFF;
				border-radius: 84rpx 84rpx 84rpx 84rpx;
				border: 2rpx solid #008EFF;
				color: #fff;
				font-weight: 400;
				font-size: 30rpx;
				line-height: 84rpx;
				margin-top: 20rpx;
			}
		}

		.contract-details {
			background-color: #ffffff;
			border-radius: 20rpx;

			.title {
				font-size: 28rpx;
				font-weight: bold;
				margin-bottom: 20rpx;
			}

			.content {
				font-size: 28rpx;
				color: #333333;
			}
		}

		.root {
			.list-item {
				display: flex;
				align-items: center;
				padding: 20px 0;
				position: relative;
				justify-content: space-between;
				border-bottom: 1rpx solid #ccc;

				&:last-child {
					border: 0;
				}

				.file-icon {
					width: 60px;
					height: 60px;
				}

				.option {
					width: 80%;

					.file-info {
						flex: 1;

						.file-title {
							font-size: 12px;
							font-weight: bold;
							color: #333;
						}

						.file-time {
							font-size: 12px;
							color: #999;
							margin-top: 4px;
						}
					}

					.action-buttons {
						width: 100%;
						display: flex;
						justify-content: flex-end;
						margin-top: 20rpx;

						.download-button {
							width: 158rpx;
							height: 57rpx;
							border-radius: 58rpx 58rpx 58rpx 58rpx;
							border: 4rpx solid #008EFF;
							font-size: 20rpx;
							color: #008EFF;
							background: #fff;
							margin: 0;
						}

						.view-button {
							width: 158rpx;
							height: 57rpx;
							border-radius: 58rpx 58rpx 58rpx 58rpx;
							border: 4rpx solid #008EFF;
							font-size: 20rpx;
							color: #fff;
							background: #008EFF;
							margin: 0;
							margin-left: 20rpx;
						}
					}
				}
			}
		}
	}
}
</style>